<template>
  <div class="box">
    <span
      class="item"
      @click="switchTab('/home')"
    >
      <img
        :src="$route.path.includes('/home') ? list[0].selected:list[0].normal"
        alt
      />
      <span :class="{on:$route.path.includes('/home')}">首页</span>
    </span>
    <span
      class="item"
      @click="switchTab('/my')"
    >
      <img
        :src="$route.path.includes('/my') ? list[1].selected:list[1].normal"
        alt
      />
      <span :class="{on:$route.path.includes('/my')}">我的</span>
    </span>
  </div>
</template>

<script>
import img1 from "../../assets/img/icon_home.png";
import img1_sel from "../../assets/img/icon_home_selected.png";
import img2 from "../../assets/img/icon_intro.png";
import img2_sel from "../../assets/img/icon_intro_selected.png";
import { reactive } from "vue";
export default {
  setup() {
    const list = reactive([
      { normal: img1, selected: img1_sel },
      { normal: img2, selected: img2_sel },
    ]);
    return {
        list
    };
  },
  methods: {
    switchTab(path) {
      this.$router.replace(path);
    },
  },
};
</script>

<style scoped lang="stylus">
.box {
  width: 100%;
  height: 50px;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 999;
  border-top: 1px solid #eee;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;

    img {
      width: 20px;
      margin-bottom: 2px;
    }

    .on {
      color: red;
    }
  }
}
</style>